let styles = require('./video.css')
interface Ivideo {
  url: string//路径
  elem: string | HTMLElement//元素
  width?: string//宽
  height?: string//高
  autoplay?: boolean//自动播放
}

// 组件接口
interface Icomponent {
  tempContainer: HTMLElement;
  init: () => void;
  template: () => void;
  handle: () => void;
}

function video(options: Ivideo) {
  return new Video(options)
}
class Video implements Icomponent {
  tempContainer;
  constructor(private settings: Ivideo) {
    this.settings = Object.assign({
      width: '100%',
      height: '100%',
      autoplay: false,
    }, this.settings)
    this.init()
  }
  init() {
    this.template()
    this.handle()
  }
  template() {
    this.tempContainer = document.createElement('div')
    this.tempContainer.className = styles.video
    this.tempContainer.style.width = this.settings.width
    this.tempContainer.style.height = this.settings.height
    this.tempContainer.innerHTML = `
      <video class="${styles['video-content']}"
      src="${this.settings.url}"></video>
      <div class="${styles['video-controls']}">
        <div class="${styles['video-progress']}">
          <div class="${styles['video-progress-now']}"></div>
          <div class="${styles['video-progress-suc']}"></div>
          <div class="${styles['video-progress-bar']}"></div>
        </div>
        <div class="${styles['video-play']}">
          <i class="iconfont icon-play-fill"></i>
        </div>
        <div class="${styles['video-time']}">
          <span>00:00</span> / <span>00:00</span>
        </div>
        <div class="${styles['video-speed']}">
          <select class="${styles['video-select']}">
            <option value="0.25">X0.25</option>
            <option value="0.5">X0.5</option>
            <option selected value="1">正常</option>
            <option value="2">X2.0</option>
            <option value="3">X4.0</option>
          </select>
        </div>
        <div class="${styles['video-full']}">
          <i class="iconfont icon-fullscreen-fill"></i>
        </div>
        <div class="${styles['video-volume']}">
          <i class="iconfont icon-volume-up-fill"></i>
          <div class="${styles['video-volprogress']}">
            <div class="${styles['video-volprogress-now']}"></div>
            <div class="${styles['video-volprogress-bar']}"></div>
          </div>
        </div>
      </div>
    `
    if (typeof this.settings.elem === 'object') {
      this.settings.elem.appendChild(this.tempContainer)
    } else {
      document.querySelector(`${this.settings.elem}`).appendChild(this.tempContainer)
    }
  }
  handle() {

    let videoContent: HTMLVideoElement = this.tempContainer.querySelector(`.${styles['video-content']}`)
    let videoControls = this.tempContainer.querySelector(`.${styles['video-controls']}`)
    let videoPaly = this.tempContainer.querySelector(`.${styles['video-controls']} i`)
    let videoTimes = this.tempContainer.querySelectorAll(`.${styles['video-time']} span`)
    let videoFull = this.tempContainer.querySelector(`.${styles['video-full']} i`)
    let videoProgress = this.tempContainer.querySelectorAll(`.${styles['video-progress']} div`)
    let videoVolProgress = this.tempContainer.querySelectorAll(`.${styles['video-volprogress']} div`)
    let volumePlay = this.tempContainer.querySelector(`.${styles['video-volume']} i`)
    let speedPlay = this.tempContainer.querySelector(`.${styles['video-select']}`)
    let timer = null;
    let tempVol = 0;

    // 音量
    videoContent.volume = 0.5

    // 自动播放
    if (this.settings.autoplay) {
      timer = setInterval(playing, 1000);
      videoContent.play()
    }

    // 底部操作栏
    this.tempContainer.addEventListener('mouseenter', function () {
      videoControls.style.bottom = 0
    })
    this.tempContainer.addEventListener('mouseleave', function () {
      videoControls.style.bottom = '-60px'
    })

    // 视频是否播放完毕
    videoContent.addEventListener('canplay', () => {
      // 视频总时间
      videoTimes[1].innerHTML = formateTime(videoContent.duration)
    })

    // 视频播放事件
    videoContent.addEventListener('play', () => {
      videoPaly.className = 'iconfont icon-pause-line'
      timer = setInterval(playing, 1000)
    })

    // 视频暂停事件
    videoContent.addEventListener('pause', () => {
      videoPaly.className = 'iconfont icon-play-fill'
      clearInterval(timer)
    })

    // 全屏
    videoFull.addEventListener('click', () => {
      videoContent.requestFullscreen()
    })

    // 播放/暂停
    videoPaly.addEventListener('click', () => {
      if (videoContent.paused) {
        videoContent.play()
      } else {
        videoContent.pause()
      }
    })

    // 倍速
    speedPlay.addEventListener('change', function (e: any) {
      videoContent.playbackRate = e.target.value
    })

    // 声音图标
    volumePlay.addEventListener('click', () => {
      if (videoContent.volume) {
        tempVol = videoContent.volume
        volumePlay.className = 'iconfont icon-volume-mute-fill'
        videoVolProgress[0].style.width = 0 + '%'
        videoVolProgress[1].style.left = 0 + '%'
        videoContent.volume = 0
      } else {
        volumePlay.className = 'iconfont icon-volume-up-fill'
        videoVolProgress[0].style.width = tempVol * 100 + '%'
        videoVolProgress[1].style.left = tempVol * 100 + '%'
        videoContent.volume = tempVol
      }
    })

    // 播放进度条拖动
    videoProgress[2].addEventListener('mousedown', function (ev: MouseEvent) {
      let downX = ev.pageX
      let downL = this.offsetLeft
      document.onmousemove = (ev: MouseEvent) => {
        let scale = (ev.pageX - downX + downL + 8) / this.parentNode.offsetWidth
        if (scale < 0) {
          scale = 0
        } else if (scale > 1) {
          scale = 1
        }
        videoProgress[0].style.width = scale * 100 + '%'
        videoProgress[1].style.width = scale * 100 + '%'
        this.style.left = scale * 100 + '%'
        videoContent.currentTime = scale * videoContent.duration
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
      }
      ev.preventDefault()
    })

    // 音量进度条
    videoVolProgress[1].addEventListener('mousedown', function (ev: MouseEvent) {
      let downX = ev.pageX
      let downL = this.offsetLeft
      document.onmousemove = (ev: MouseEvent) => {
        let scale = (ev.pageX - downX + downL + 8) / this.parentNode.offsetWidth
        if (scale < 0) {
          scale = 0
          volumePlay.className = 'iconfont icon-volume-mute-fill'
        } else if (scale > 1) {
          scale = 1
        } else {
          volumePlay.className = 'iconfont icon-volume-up-fill'
        }
        videoVolProgress[0].style.width = scale * 100 + '%'
        this.style.left = scale * 100 + '%'
        videoContent.volume = scale
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
      }
      ev.preventDefault()
    })

    // 正在播放中
    function playing() {
      // 播放时间
      videoTimes[0].innerHTML = formateTime(videoContent.currentTime)
      // 播放进度条
      let scale = videoContent.currentTime / videoContent.duration
      let scaleSuc = videoContent.buffered.end(0) / videoContent.duration
      videoProgress[0].style.width = scale * 100 + '%'
      videoProgress[1].style.width = scaleSuc * 100 + '%'
      videoProgress[2].style.left = scale * 100 + '%'
    }

    // 格式化时间
    function formateTime(number: number): string {
      const hours = Math.floor(number / 3600);
      const minutes = Math.floor((number % 3600) / 60);
      const seconds = Math.floor((number % 3600) % 60);
      return (setZero(hours) == '00' ? '' : setZero(hours) + ':') + setZero(minutes) + ":" + setZero(seconds)
    }

    // 填0
    function setZero(number: number): string {
      return number < 10 ? `0${number}` : `${number}`
    }
  }

}
export default video